<template>
  <div>
		<div class="nav-header">
			<el-row class="main-header">
				<el-col :span="8" class="left-title">Hemes</el-col>
				<el-col :span="16">
					<span><a href="#" :class="{actived: activeName=='1'}" @click="handleTab('1')">系统功能</a></span>
					<span><a href="#" :class="{actived: activeName=='2'}" @click="handleTab('2')">系统概览</a></span>
					<span><a href="#" :class="{actived: activeName=='3'}" @click="handleTab('3')">在线购买</a></span>
					<span><a href="#" :class="{actived: activeName=='4'}" @click="handleTab('4')">配置推荐</a></span>
					<span><a href="#" :class="{actived: activeName=='5'}" @click="handleTab('5')">无忧退款</a></span>
					<span>
						<el-button class="download-btn"><img src="../../assets/system/download-header.png" alt="">下载客户端</el-button>
					</span>
				</el-col>
			</el-row>
		</div>
		<div class="content-box">
			<div class="header-banner">
				<div class="banner-text">
					<span class="text-1">以患者为中心，搭建优质口腔诊所</span>
					<span class="text-2">只服务于独立口腔诊所的云管理系统</span>
					<el-button class="download-btn add-style-btn"><img src="../../assets/system/download-banner.png" alt="">下载客户端</el-button>
					<span class="text-3">支持的操作系统Windows 7及以上版本、Intel Mac、OS X<br/>需要互联网连接（推荐使用宽带）</span>
				</div>
			</div>
			<div class="first-part">
				<div class="part-header">
					<div class="bg-text">EFFECT</div>
					<div class="header-text">
						<span>系统功能</span>
						<span>HEMES是一款以阿里云技术为基础的SaaS独立口腔诊所管理系统</span>
					</div>
				</div>
				<div class="first-content">
					<el-row :gutter="40">
						<el-col :span="8">
							<el-card class="box-card">
								<div class="img-height">
									<img class="card-img" src="../../assets/system/first-icon-1.png" alt="">
								</div>
								<p class="card-title">预防预警引擎</p>
								<div>
									<span>在有限的服务半径内针对不同人群制定相应的预防策略，以挖掘出客户的潜在需求，进而引导消费。</span>
									<span>4大竞争优势（服务价格、服务质量、服务体验、服务距离）满足客户被发掘的需求。</span>
									<span>患者为中心的服务意识为HEMES的潜在设计语言，多维度全流程可追溯，实现口碑裂变。帮助独立诊所打造出可持续的获客模式。</span>
								</div>
							</el-card>
						</el-col>
						<el-col :span="8">
							<el-card class="box-card">
								<div class="img-height">
									<img class="card-img" src="../../assets/system/first-icon-2.png" alt="">
								</div>
								<p class="card-title">连贯的医疗服务</p>
								<div>
									<span>从设计之初即遵循JCI国际标准，强调连贯的就医流程。</span>
									<span>从客户邀约、预约、诊前信息移动端收集，到护士术前准备、洗消、打包，再到医生诊断、处置、加工外派、收费、随访，一直到患者康复进入再次预防策略和口碑裂变阶段，全部信息和服务流程都是连贯一致、高效透明、全程可追溯的专业性及竞争力。</span>
								</div>
							</el-card>
						</el-col>
						<el-col :span="8">
							<el-card class="box-card">
								<div class="img-height">
									<img class="card-img" src="../../assets/system/first-icon-3.png" alt="">
								</div>
								<p class="card-title">健全的患者档案</p>
								<div>
									<span>以“患者为中心”贯穿HEMES的医疗流程。HEMES以保护隐私且简洁高效的工作流程，协助您正确识别管理患者。</span>
									<span>电子医疗卡——就诊的流程扫码识别，即不会在公众场合泄露客户个人信息，又避免了人为操作带来的失误。各种健康信息全流程记录，多角度回顾个人健康史，用以提供个性化医疗服务。</span>
								</div>
							</el-card>
						</el-col>
					</el-row>
					<el-row :gutter="40" style="margin-top:60px;">
						<el-col :span="8">
							<el-card class="box-card">
								<div class="img-height">
									<img class="card-img" src="../../assets/system/first-icon-4.png" alt="">
								</div>
								<p class="card-title">建立患者信任体系</p>
								<div>
									<span>患者知情权是患者和家属权力的一个重要组成部分，更是有效降低医疗风险的一个重要手段。</span>
									<span>基于此，HEMES提供一系列的患教材料和工具，让诊所的经营者、医生和护士更了解的一切信息，共同制定治疗方案。</span>
									<span>客户可以通过微信小程序，轻松便捷的了解自己和家人的口腔健康档案。</span>
								</div>
							</el-card>
						</el-col>
						<el-col :span="8">
							<el-card class="box-card">
								<div class="img-height">
									<img class="card-img" src="../../assets/system/first-icon-5.png" alt="">
								</div>
								<p class="card-title">质量改进与患者安全</p>
								<div>
									<span>随着医疗技术的不断发展，各类新的治疗方法层出不穷，医生在掌握新技术的过程中务必会有非常多的不确定性，不仅要持续跟踪与优化治疗流程，还需要随时监控治疗结果，耗费非常大的人力及物力。</span>
									<span>快速配置符合自身运营特点的个性化管理需求。在节省人力和培训成本的同时提高操作标准化，以达到降低风险和持续改进的目的。</span>
								</div>
							</el-card>
						</el-col>
						<el-col :span="8">
							<el-card class="box-card">
								<div class="img-height">
									<img class="card-img" src="../../assets/system/first-icon-6.png" alt="">
								</div>
								<p class="card-title">感染预防与控制</p>
								<div>
									<span>在医疗行为中，感控是需要严肃对待的一环。但是很遗憾的是，调查了多款软件的情况下我们没有发现任何一款软件像我们一样对感控环节拥有严肃的态度。HEMES将标准的洗消流程融合进流程，打造了器械溯源功能。</span>
									<span>不仅打破了患者与诊所之间的信息壁垒，更增强彼此间的信任，也是体现诊所对于患者安全的重视。</span>
								</div>
							</el-card>
						</el-col>
					</el-row>
				</div>
			</div>
			<div class="second-part">
				<div class="part-header">
					<div class="bg-text">VIEW</div>
					<div class="header-text">
						<span>系统概览</span>
						<span>HEMES是一款以阿里云技术为基础的SaaS独立口腔诊所管理系统</span>
					</div>
				</div>
				<div class="second-content">
					<el-row>
						<el-col :span="24">
							<el-card class="box-card">
								<p class="card-title">建立患者信任体系</p>
								<img src="../../assets/system/second-1.png" alt="">
								<div>
									<span>这是一件非常重要且不允许有妥协的事情。</span>
									<span>正如您一样，HEMES认为在医疗行为中，感控是需要严肃对待的一环。但是很遗憾的是，在HEMES调查了多款软件的情况下我们没有发现任何一款软件像我们一样，对感控环节拥有近乎偏执的态度。</span>
									<span>患者信任的建立源自于多个维度。HEMES为患者提供的微信小程序可以查看每次的治疗信息，例如器械溯源。HEMES按照国家卫健委的规范将标准的洗消流程融合进了诊所运营流程中，打造了器械溯源功能，器械溯源不仅是打破了患者与诊所之间的信息壁垒。</span>
								</div>
							</el-card>
						</el-col>
					</el-row>
					<el-row>
						<el-carousel :interval="4000" type="card" arrow="never" :autoplay="false">
							<el-carousel-item>
								<div class="item-card">
									<p class="card-title">日常工作系统</p>
									<img src="../../assets/system/second-3.png" alt="">
									<div>
										<span>这是一件非常重要且不允许有妥协的事情。</span>
										<span>正如您一样，HEMES认为在医疗行为中，感控是需要严肃对待的一环。</span>
										<span>但是很遗憾的是，在HEMES调查了多款软件的情况下我们没有发现任何一款软件像我们一样，对感控环节拥有近乎偏执的态度。</span>
									</div>
								</div>
							</el-carousel-item>
							<el-carousel-item>
								<div class="item-card">
									<p class="card-title">日常工作系统</p>
									<img src="../../assets/system/second-3.png" alt="">
									<div>
										<span>这是一件非常重要且不允许有妥协的事情。</span>
										<span>正如您一样，HEMES认为在医疗行为中，感控是需要严肃对待的一环。</span>
										<span>但是很遗憾的是，在HEMES调查了多款软件的情况下我们没有发现任何一款软件像我们一样，对感控环节拥有近乎偏执的态度。</span>
									</div>
								</div>
							</el-carousel-item>
							<el-carousel-item>
								<div class="item-card">
									<p class="card-title">日常工作系统</p>
									<img src="../../assets/system/second-3.png" alt="">
									<div>
										<span>这是一件非常重要且不允许有妥协的事情。</span>
										<span>正如您一样，HEMES认为在医疗行为中，感控是需要严肃对待的一环。</span>
										<span>但是很遗憾的是，在HEMES调查了多款软件的情况下我们没有发现任何一款软件像我们一样，对感控环节拥有近乎偏执的态度。</span>
									</div>
								</div>
							</el-carousel-item>
						</el-carousel>
					</el-row>
				</div>
			</div>
			<div class="third-part">
				<div class="part-header">
					<div class="bg-text">BUYING</div>
					<div class="header-text">
						<span>在线购买</span>
						<span>在线购买注册KEY后，下载客户端注册即可使用系统，我们提供两个月内 <a href="#">无忧退款</a> 服务</span>
					</div>
				</div>
				<div class="third-content">
					<div class="content-1 clearfix">
						<p>
							<img src="../../assets/system/third-icon-1.png" alt="">
							<span>永久拥有</span>
						</p>
						<p>
							<img src="../../assets/system/third-icon-2.png" alt="">
							<span>云端备份</span>
						</p>
						<p>
							<img src="../../assets/system/third-icon-3.png" alt="">
							<span>无风险全额退款</span>
						</p>
						<p>
							<img src="../../assets/system/third-icon-4.png" alt="">
							<span>持续更新</span>
						</p>
					</div>
				</div>
			</div>
			<div class="forth-part">
				<div class="part-header">
					<div class="bg-text">ENVIRONMENT</div>
					<div class="header-text">
						<span>配置推荐</span>
						<span>HEMES是一款以阿里云技术为基础的SaaS独立口腔诊所管理系统</span>
					</div>
				</div>
				<div class="forth-content">
					<div class="forth-card forth-card-1">
						<p class="card-title">基础配置</p>
						<div class="forth-line">
							<div class="line-left">
								<img src="../../assets/system/forth-icon-1.png" alt="">
							</div>
							<div class="line-right">
								<p class="right-p-1">电脑 <span>1</span> 台</p>
								<p class="right-p-2">护士站、医生站</p>
							</div>
						</div>
						<div class="forth-second-line">
							<div class="second-line-left">
								<img src="../../assets/system/forth-icon-2.png" alt="">
							</div>
							<div class="line-second-right">
								<p class="right-p-1">扫码枪 <span>1</span> 台</p>
								<p class="right-p-2">护士站、医生站、仓库站</p>
							</div>
						</div>
						<div class="forth-line">
							<div class="line-left">
								<img src="../../assets/system/forth-icon-3.png" alt="">
							</div>
							<div class="line-right">
								<p class="right-p-1">小票打印机 <span>1</span> 台</p>
								<p class="right-p-2">护士站</p>
							</div>
						</div>
						<div class="forth-second-line">
							<div class="second-line-left">
								<img src="../../assets/system/forth-icon-4.png" alt="">
							</div>
							<div class="line-second-right">
								<p class="right-p-1">条码打印机 <span>1</span> 台</p>
								<p class="right-p-2">护士站</p>
							</div>
						</div>
						<div class="forth-line">
							<div class="line-left">
								<img src="../../assets/system/forth-icon-5.png" alt="">
							</div>
							<div class="line-right">
								<p class="right-p-1">普通打印机 <span>1</span> 台</p>
								<p class="right-p-2">医生站、仓库站</p>
							</div>
						</div>
					</div>
					<div class="forth-card forth-card-2">
						<img class="better-icon" src="../../assets/system/forth-icon-8.png" alt="">
						<p class="card-title">最佳配置</p>
						<div class="forth-line">
							<div class="line-left">
								<img src="../../assets/system/forth-icon-1.png" alt="">
							</div>
							<div class="line-right">
								<p class="right-p-1">电脑 <span>4</span> 台</p>
								<p class="right-p-2">护士站、医生站、仓库站、洗消站</p>
							</div>
						</div>
						<div class="forth-second-line">
							<div class="second-line-left">
								<img src="../../assets/system/forth-icon-6.png" alt="">
							</div>
							<div class="line-second-right">
								<p class="right-p-1">扫码枪 <span>4</span> 台</p>
								<p class="right-p-2">护士站、医生站、仓库站、洗消站</p>
							</div>
						</div>
						<div class="forth-line">
							<div class="line-left">
								<img src="../../assets/system/forth-icon-3.png" alt="">
							</div>
							<div class="line-right">
								<p class="right-p-1">小票打印机 <span>2</span> 台</p>
								<p class="right-p-2">护士站、洗消站</p>
							</div>
						</div>
						<div class="forth-second-line">
							<div class="second-line-left">
								<img src="../../assets/system/forth-icon-7.png" alt="">
							</div>
							<div class="line-second-right">
								<p class="right-p-1">条码打印机 <span>2</span> 台</p>
								<p class="right-p-2">护士站、洗消站</p>
							</div>
						</div>
						<div class="forth-line">
							<div class="line-left">
								<img src="../../assets/system/forth-icon-5.png" alt="">
							</div>
							<div class="line-right">
								<p class="right-p-1">普通打印机 <span>2</span> 台</p>
								<p class="right-p-2">医生站、仓库站</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="fifth-part">
				<div class="fifth-title">
					<span>推荐周边</span>
				</div>
				<div class="fifth-content clearfix">
					<div class="fifth-item">
						<img src="../../assets/system/fifth-icon-1.png" alt="">
						<span>扫码枪</span>
						<span>需支持扫一维码和二维码</span>
					</div>
					<div class="fifth-item">
						<img src="../../assets/system/fifth-icon-2.png" alt="">
						<span>小票打印机</span>
						<span>配合热敏小票纸使用</span>
					</div>
					<div class="fifth-item">
						<img src="../../assets/system/fifth-icon-3.png" alt="">
						<span>条码打印机</span>
						<span>配合标签打印纸使用</span>
					</div>
					<div class="fifth-item">
						<img src="../../assets/system/fifth-icon-4.png" alt="">
						<span>热敏小票纸</span>
						<span>尺寸：宽80mm，长度不限</span>
					</div>
					<div class="fifth-item">
						<img src="../../assets/system/fifth-icon-5.png" alt="">
						<span>标签打印纸</span>
						<span>尺寸规格：横版 60*30</span>
					</div>
				</div>
			</div>
			<div class="footer-part">
				<div class="footer-content">
					<div class="footer-left">
						<div class="left-link"><img src="../../assets/system/footer-icon-1.png" alt=""><span>下载客户端</span></div>
						<div class="left-link"><img src="../../assets/system/footer-icon-2.png" alt=""><span>患者APP</span></div>
					</div>
					<div class="footer-right">
						<span>HEMES是一款以阿里云技术为基础的SaaS独立口腔诊所管理系统。</span>
						<span>Copyright © 2019 版权所有 津ICP备15030071号-1</span>
					</div>
				</div>
			</div>
		</div>
  </div>
</template>
<style scoped>
	.nav-header{
		width:100%;
		height:120px;
		background-color: #fff;
	}
	.main-header{
		width:1200px;
		margin:0 auto;
		line-height: 120px;
	}
	.main-header span{
		margin-right:70px;
	}
	.main-header span:last-of-type{
		margin-right:0px;
	}
	.main-header span a{
		color:#4d4d4d;
		font-size:14px;
		border-bottom: 2px solid #fff;
	}
	.main-header span a:hover{
		color:#a01bcc;
		padding-bottom:3px;
		border-bottom: 2px solid #a01bcc;
	}
	.main-header span a.actived{
		color:#a01bcc;
		padding-bottom:3px;
		border-bottom: 2px solid #a01bcc;
	}
	.left-title{
		color:#a01bcc;
		font-size:36px;
	}
	.download-btn{
		width:140px;
		background-color: #a01bcc;
		color:#fff;
		font-size:14px;
		height:46px;
		line-height:46px;
		padding:0;
		border: 1px solid transparent;
	}
	.download-btn img{
		width:22px;
		height:18px;
		margin-right:6px;
		position:relative;
		top:3px;
	}
	.header-banner{
		width:100%;
		height:467px;
		background: url(../../assets/system/banner.png) center no-repeat;
		background-size: cover;
		background-color:#fafafa;
	}
	.header-banner .banner-text{
		width:1200px;
		margin:0 auto;
		padding-top:106px;
	}
	.banner-text span {
		display: block;
	}
	.banner-text .text-1{
		color:#fff;
		font-size:44px;
		margin-bottom:10px;
	}
	.banner-text .text-2{
		color:#fff;
		font-size:18px;
	}
	.banner-text .text-3{
		color:#d9a6ea;
		font-size: 14px;
		line-height: 25px;
	}
	.banner-text .add-style-btn{
		background: #ffd162;
		color:#a01bcc;
		margin: 40px 0 18px 0;
	}
	.first-part{
		background-color:#fafafa;
		padding-top:80px;
		padding-bottom:120px;
	}
	.part-header{
		text-align:center;
		position:relative;
	}
	.part-header .bg-text{
		font-size:106px;
		color: #ebebeb;
		z-index: -1;
		font-weight:700;
	}
	.part-header .header-text{
		margin-top:-108px;
		color:#606266;
	}
	.part-header .header-text span:first-of-type{
		display: inline-block;
		font-size:30px;
		padding-bottom:3px;
		border-bottom: 3px solid #606266;
		margin-bottom:8px;
	}
	.part-header .header-text span:last-of-type{
		display: block;
		font-size:14px;
	}
	.first-part .first-content{
		width:1080px;
		margin:60px auto 0;
	}
	.first-content .box-card{
		text-align: center;
		font-size:14px;
		color:#606266;
		padding:36px 20px 0;
		width:280px;
		height:450px;
	}
	.first-content .box-card .img-height{
		height:48px;
	}
	.first-content .box-card .card-title{
		color:#606266;
		font-size:20px;
		font-weight:700;
	}
	.first-content .box-card div span{
		display: block;
		text-align: left;
		line-height:26px;
	}
	.second-part{
		background-color: #fff;
		padding-top:116px;
	}
	.second-part .second-content{
		width:1200px;
		margin:60px auto 90px;
	}
	.second-content .box-card{
		text-align: center;
		padding:30px 0;
	}
	.second-content .box-card p{
		font-size:20px;
		color:#606266;
		font-weight: 700;
		margin:0 0 30px 0;
	}
	.second-content .box-card div{
		width:980px;
		margin:50px auto 0;
		font-size:14px;
		text-align: left;
		line-height:26px;
		color:#606266;
	}
	.second-content .box-card div span{
		display: block;
	}
	.second-content .item-card{
		text-align: center;
		color:#606266;
		box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
		width:570px;
		height:360px;
		margin: 50px auto 0;
		background-color: #fff;
		border-radius:4px;
	}
	.second-content .item-card .card-title{
		font-size:20px;
		font-weight:700;
		padding-top:40px;
		margin:0 0 30px 0;
	}
	.second-content .item-card div span{
		display: block;
	}
	.second-content .item-card div{
		font-size:14px;
		text-align: left;
		line-height: 26px;
		padding:20px 40px 0;
	}
	.second-content >>> .el-carousel__container {
		height:420px;
	}
	.second-content >>> .el-carousel__mask{
		opacity: 0.6;
	}
	.second-content >>> .el-carousel__indicators--outside button{
		background-color:#e4e4e4;
		opacity: 1;
	}
	.second-content >>> .el-carousel__indicators--outside .is-active button{
		background-color:#a01bcc;
	}
	.second-content >>> .el-carousel__button{
		width:80px;
		height:6px;
	}
	.forth-part{
		background-color: #fafafa;
		padding-top:80px;
	}
	.forth-part .forth-content{
		width:1200px;
		margin:60px auto 0;
		padding-bottom:60px;
		padding-left:90px;
		padding-right:90px;
		box-sizing: border-box;
	}
	.forth-content .forth-card{
		display: inline-block;
		color:#606266;
		box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
		width:480px;
		height:660px;
		background-color: #fff;
		border-radius:4px;
	}
	.forth-content .forth-card-2{
		float:right;
		position:relative;
	}
	.forth-content .forth-card-2 .better-icon{
		position:absolute;
		left:40px;
	}
	.forth-content .forth-card-2 .forth-line .line-left{
		background-color: #ffd162!important;
	}
	.forth-card-2 .forth-line .line-right p span{
		color: #ffd162 !important;
	}
	.forth-card-2 .forth-second-line .second-line-left{
		border:1px solid #ffd162!important;
	}
	.forth-card-2 .forth-second-line .line-second-right p span{
		color: #ffd162 !important;
	}
	.forth-card .card-title{
		font-size:20px;
		color:#606266;
		font-weight:700;
		margin:0;
		text-align: center;
		padding-top:50px;
		padding-bottom:45px;
	}
	.forth-card .forth-line{
		margin-bottom:30px;
	}
	.forth-card .forth-line .line-left{
		display: inline-block;
		width:190px;
		height:60px;
		background-color: #409eff;
		border-radius:0 60px 60px 0;
		position:relative;
	}
	.forth-card .forth-line .line-left img{
		position:absolute;
		right:20px;
		top:50%;
		transform: translateY(-50%);
	}
	.forth-card .forth-line .line-right{
		margin-left:30px;
		display: inline-block;
		font-size:14px;
	}
	.forth-card .forth-line .line-right p{
		margin:0;
		color:#606266;
	}
	.forth-card .forth-line .line-right p.right-p-1{
		font-size:16px;
		position:relative;
		top:-20px;
	}
	.forth-card .forth-line .line-right p.right-p-2{
		position:relative;
		top:-5px;
	}
	.forth-card .forth-line .line-right p span{
		color:#409eff;
		font-weight:700;
	}
	.forth-card .forth-second-line{
		margin-bottom: 30px;
	}
	.forth-card .forth-second-line .second-line-left{
		display: inline-block;
		width:80px;
		height:80px;
		border-radius:50%;
		position:relative;
		left:115px;
		border:1px solid #409eff;
	}
	.forth-card .forth-second-line .second-line-left img{
		position:absolute;
		left:50%;
		top:50%;
		transform: translateX(-50%) translateY(-50%);
	}
	.forth-card .forth-second-line .line-second-right{
		margin-left:138px;
		display: inline-block;
		font-size:14px;
	}
	.forth-card .forth-second-line .line-second-right p{
		margin:0;
		color:#606266;
	}
	.forth-card .forth-second-line .line-second-right p.right-p-1{
		font-size:16px;
		position:relative;
		top:-33px;
	}
	.forth-card .forth-second-line .line-second-right p.right-p-2{
		position:relative;
		top:-18px;
	}
	.forth-card .forth-second-line .line-second-right p span{
		color:#409eff;
		font-weight:700;
	}
	.third-part{
		background-color:#a01bcc;
		padding-top:116px;
		box-sizing: border-box;
	}
	.third-part .part-header .header-text{
		color: #ffffff !important;
	}
	.third-part .part-header .header-text span a{
		color:#ffd162;
		text-decoration: underline;
	}
	.third-part .part-header .header-text span:first-of-type{
		border-bottom: 3px solid #fff;
	}
	.third-part .part-header .bg-text{
		color: #ae2bda !important;
	}
	.third-part .third-content{
		width:1200px;
		padding-top:80px;
		margin:0 auto;
	}
	.third-content .content-1{
		padding:0 300px 70px;
		box-sizing: border-box;
	}
	.third-content .content-1 p{
		margin:0;
		color:#ffd162;
		font-size:16px;
		display: inline-block;
		width:150px;
		text-align: center;
		float:left;
	}
	.third-content .content-1 p img{
		display: block;
		margin:0 auto 25px;
	}
	.clearfix{
		content: '';
		clear:both;
		display: block;
	}
	.fifth-part{
		background-color:#fff;
		box-sizing:border-box;
		padding-top:60px;
		padding-bottom:60px;
	}
	.fifth-part .fifth-title{
		font-size:20px;
		color:#606266;
		font-weight: 700;
		text-align: center;
		margin-bottom:40px;
	}
	.fifth-part .fifth-content{
		width:1200px;
		margin:0 auto;
	}
	.fifth-part .fifth-content .fifth-item{
		width:226px;
		float:left;
		text-align: center;
		margin-right:17px;
	}
	.fifth-part .fifth-content .fifth-item:last-of-type{
		margin-right:0;
	}
	.fifth-part .fifth-content .fifth-item span{
		display: block;
		font-size:14px;
		color:#606266;
	}
	.fifth-part .fifth-content .fifth-item span:first-of-type{
		font-size:16px;
		color:#409eff;
		font-weight: 700;
		margin:60px 0 28px;
	}
	.footer-part{
		height:140px;
		background-color:#630782;
		font-size:14px;
	}
	.footer-part .footer-content{
		width:1200px;
		margin:0 auto;
	}
	.footer-part .footer-content .footer-left{
		padding-top:40px;
		float:left;
		color:#ffd162;
	}
	.footer-part .footer-content .footer-left .left-link{
		display: inline-block;
	}
	.footer-part .footer-content .footer-left .left-link:last-of-type{
		margin-left:80px;
	}
	.footer-part .footer-content .footer-left .left-link span{
		position:relative;
		top:-23px;
		left:10px;
	}
	.footer-part .footer-content .footer-right{
		float:right;
		color:#ffffff;
		padding-top:45px;
		text-align: right;
	}
	.footer-part .footer-content .footer-right span{
		display: block;
		line-height: 25px;
	}
</style>
<script>
	export default{
		data () {
			return {
				activeName: '1'
			}
		},
		created() {

		},
		methods: {
			handleTab(index) {
				this.activeName = index
			}
		}
	}
</script>
